<template>
    <div class="container">
        <h3>echarts的基本使用</h3>
        <div class="echarts-container">
            <div class="histogram" ref="histogram"></div>
        </div>
    </div>
</template>

<style scoped>
/* 标题样式设置 */
.container h3 {
    text-align: center;
    border-bottom: 2px solid red;
    margin: 0;
    height: 50px;
    line-height: 50px;
}

/* 容器样式设置 */
.echarts-container {
    width: 100%;
    height: calc(100vh - 50px - 56px - 2px - 2px);
    /* 减去标题和header的高度 */
    background-color: #f5f5f5;
}

/* 柱状图样式设置 */
.histogram {
    background-color: aqua;
    margin: 8px;
    border-radius: 10px;
    width: 400px;
    height: 300px;
}
</style>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
// echarts配置
import * as echarts from 'echarts';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GridComponent, BarChart, CanvasRenderer]);

// 定义柱状图的引用
const histogram = ref(null);
// 定义柱状图数据容器
const histogramOption = ref({});
onMounted(() => {
    // 调用柱状图方法
    histogramMethod();
})

// 柱状图方法
const histogramMethod =async () => {
    //初始化echarts实例，并传入DOM元素
    // 通过ref获取DOM元素
    const myChart = echarts.init(histogram.value);
    histogramOption.value =await getHistogramData();
    myChart.setOption(histogramOption.value);
}

// 获取柱状图数据
const getHistogramData = async () => {
    const res = await axios.get('/api/echarts');
    return res.data;
}

</script>